import { connect } from "react-redux";
import { increment, decrement } from "./store/actions";

const App = (props) => {
    const { counts, increment, decrement } = props;
    return (
        <>
            <div className="page-header">
                <h1>
                    Redux <small>基本使用</small>
                </h1>
            </div>
            <div className="page-content">
                <div className="wrapper wrapper1">
                    <div className="alert alert-danger">
                        当前counts的值为：{counts}
                    </div>
                    <div className="btn-group">
                        <div
                            className="btn btn-default"
                            onClick={() => increment(1)}
                        >
                            增加
                        </div>
                        <div
                            className="btn btn-danger"
                            onClick={() => decrement(1)}
                        >
                            减少
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

// 将state的值映射到组件的props中
const mapState = (state) => {
    return {
        counts: state.count,
    };
};

// 将dispatch映射到组件的props中
const mapDispatch = (dispatch) => {
    return {
        increment: (payload) => dispatch(increment(payload)),
        decrement: (payload) => dispatch(decrement(payload)),
    };
};

export default connect(mapState, mapDispatch)(App);
